<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="d1";">
        <img src="./d2.png">
    </div>
    <button id="open">开灯</button>
    <button id="close">关灯</button><br/>
    <button id="b3">开关灯</button>

    <script>
        //两个按钮控制开关灯
        var a = document.getElementById("d1");
        var b = document.getElementById("open");
        var c = document.getElementById("close");
        b.onclick=function(){
            a.style.backgroundColor="rgb(33, 95, 66)";
            console.log('open');
        }
        c.onclick=function(){
            a.style.backgroundColor="rgb(95, 33, 33)";
            console.log('close');
        }

        //一个按钮控制开关灯
        var btn=document.getElementById("b3");
        var flag=0;   //也可以用innerHTML获取文本内容来判断
        btn. onclick=function(){
            if(flag==0){
                a.style.backgroundColor='black';
                flag=1;
            }else{
                a.style.backgroundColor='white';
                flag=0; 
            }
        }          
    </script>

    <style>
        #d1{
            width: 200px;
            height: 200px;
            background-color:rgb(255, 255, 255);
            border-radius: 100px;
        }
        #d1 img{
            width: 100%;
            height: 100%;
        }
    </style>
    
</body>
</html>